<template>
	<div class="body-container-right">
		<div class="body-container-right-content" ref="content">
			<div class="myself">
				<span> 准备开始了！！我蹲了超久这场比赛，就 是说一整个大期待哈哈哈</span>
				<img src="https://avatars.githubusercontent.com/u/81468415?v=4" alt="" />
			</div>
			<div class="other">
				<img src="https://avatars.githubusercontent.com/u/81468415?v=4" alt="" />
				<span> 准备开始了！！我蹲了超久这场比赛，就 是说一整个大期待哈哈哈</span>
			</div>
			<div v-for="(item, index) in this.list" :key="index" :class="item._class">
				<img
					v-show="item._class === 'other'"
					src="https://avatars.githubusercontent.com/u/81468415?v=4"
					alt=""
				/>
				<span> {{ item.content }}</span>
				<img
					v-show="item._class === 'myself'"
					src="https://avatars.githubusercontent.com/u/81468415?v=4"
					alt=""
				/>
			</div>
		</div>
		<div class="operate-comment">
			<div class="operate-comment-wrapper">
				<input v-model="val" class="input" placeholder="请输入信息发送" type="text" />
				<img class="face" src="@/assets/face.png" alt="" />
				<i class="fgx"></i>
				<el-button class="sendMsg" @click="sendMsg()">发送</el-button>
			</div>
		</div>
	</div>
</template>

<script>
import socket, { sendMsgIO, saveIDIO, IOINIT } from "@/utils/socket.io";
export default {
	name: "ChatBodyRight",
	data() {
		return {
			val: "",
			IDIO: "",
			list: []
		};
	},
	methods: {
		async sendMsg() {
			if (!this.val) {
				return;
			}

			sendMsgIO(this.val);
			this.val = "";
		}
	},
	created() {},
	async mounted() {
		IOINIT();
		const res = await saveIDIO();
		this.IDIO = res;

		socket.on("receiveMess", val => {
			const classN = val.id === this.IDIO ? "myself" : "other";
			this.list.push({ content: val.val, _class: classN });
			// 异步解决................ gan le
			setTimeout(() => {
				const childs = this.$refs.content.lastChild;
				if (childs.offsetTop + childs.clientHeight + 100 >= this.$refs.content.clientHeight) {
					this.$refs.content.scrollTop = childs.offsetTop + childs.clientHeight;
				}
			}, 2);
		});
	},
	update() {},
	filter: {},
	computed: {},
	watch: {}
};
</script>

<style scoped lang="less">
.body-container-right {
	position: relative;
	box-sizing: border-box;
	// width: 440px;
	width: 23%;
	min-width: 300px;
	padding: 20px 20px 0;
	border: 1px solid #15161f;
	overflow: hidden;
	height: 80%;
	min-height: 450px;
	&-content {
		overflow: scroll;
		height: 90%;
		&::-webkit-scrollbar {
			display: none; /* Chrome Safari */
		}
		padding-bottom: 20px;
		div:last-child {
			// margin-bottom: 60px;
		}
		.myself,
		.other {
			margin-bottom: 20px;
			color: #fff;
		}
		img {
			width: 40px;
			height: 40px;
		}
		.myself {
			display: flex;
			justify-content: right !important;
			span {
				border-radius: 18px 4px 18px 18px;
				background-color: #0084ff;
				max-width: 70%;
				margin: 0 5px;
				padding: 10px 14px;
				font-size: 16px;
			}
		}
		.other {
			display: flex;
			justify-content: left;
			span {
				border-radius: 4px 18px 18px 18px;
				background-color: #353744;
				max-width: 70%;
				padding: 10px 14px;
				margin-left: 5px;
				font-size: 16px;
			}
		}
	}
	.operate-comment {
		position: absolute;
		justify-content: space-between;
		bottom: 0;
		left: 0;
		background-color: #353744;
		border-top: 1px solid #373737;
		z-index: 9;
		width: 100%;
		&-wrapper {
			width: 100%;
			position: relative;
			top: 0;
			display: flex;
			padding-top: 5px;
			.input {
				box-sizing: border-box;
				opacity: 1;
				width: 80%;
				margin: 0 5px;
				outline: none;
				border: 1px solid #707070;
				border-radius: 28px 28px 28px 28px;
				padding-right: 60px !important;
				padding: 16px 0;
				padding-left: 17px;
				color: #fff;
				background-color: #707070;
				&::placeholder {
					color: #333333;
				}
			}
			.face {
				position: absolute;
				bottom: 11px;
				// left: 270px;
				right: 110px;
			}
			.fgx {
				position: absolute;
				display: inline-block;
				width: 0px;
				opacity: 1;
				height: 54px;
				border: 1px solid #15161f;
				right: 89px;
				bottom: 1px;
			}
			.sendMsg {
				width: 91px;
				height: 54px;
				background: #2529d8;
				border: 1px solid #2529d8;
				color: #fff;
				border-radius: 27px 27px 27px 27px;
				opacity: 1;
				margin-left: 5px;
			}
		}
	}
}
</style>
